<template>
	<view class="detail-container">
		<view class="detail-main">
			<view v-if="detailObj.id" class="author-box">
				<view class="avatar">
					<u-image v-if="detailObj.avatar" class="img" width="102rpx" height="102rpx" :src="detailObj.avatar" shape="circle"></u-image>
				</view>
				<view class="info">
					<view class="top">{{(detailObj.name || '')}}</view>
					<view class="bottom">{{(detailObj.createTime?(detailObj.createTime):'') + ' · ' + (detailObj.rp03name || '')}}</view>
				</view>
			</view>
			<view class="detail-title">{{(detailObj.storeName || '')}}</view>
			<view class="detail-remark">备注：{{(detailObj.remark || '')}}</view>

			<view class="detail-videos-box-title" :data="videoList.length">共有{{videoList.length + videoList2.length}}个视频</view>
			<view class="detail-videos-box" v-if="videoList.length > 0" :data="videoList2.length">
				<view class="detail-video-item" v-for="(item, index) in videoList" :key="index" style="background-color: #000000;">
					<video v-if="item.fileFullUrl" :src="item.fileFullUrl" objectFit="fill" :initial-time="1" controls></video>
					<view class="my-video-bg" @tap.stop="showVideoFn(item.fileFullUrl)"></view>
					<view v-if="(videoList2.length > 0) && (index !== 0) && (index == (videoList.length - 1))" class="btn-get-more"
					 @tap.stop="getMorVideo()" style="height: 100%;">+{{videoList2.length}}</view>
				</view>
			</view>
			
			<view class="show-video-box" v-if="showVideoUrl.length>0" @tap.stop="closeVideoFn()">
				<view class="show-video-box-bd" @tap.stop="closeVideoFn()">
					<video id="myVideo" :src="showVideoUrl" :autoplay="true" controls :show-fullscreen-btn="true" @tap.stop="closeVideoFn()"></video>
					<view class="close-show-video-btn" @tap.stop="closeVideoFn()">返 回</view>
				</view>	
			</view>

			<view class="detail-videos-box-title" :data="imgList.length">共有{{imgList.length + imgList2.length}}个图片</view>
			<view class="detail-videos-box" v-if="imgList.length > 0" :data="imgList2.length">
				<view class="detail-video-item" v-for="(item, index) in imgList" :key="index">
					<view class="detail-video-item-bg">
						<image v-if="item.fileFullUrl" :src="item.fileFullUrl" mode="widthFix" @tap.stop="imgPreview(index)"></image>
						<view v-if="(imgList2.length > 0) && (index !== 0) && (index == (imgList.length - 1))" class="btn-get-more"
						 @tap.stop="getMorImg()">+{{imgList2.length}}</view>
					</view>
				</view>
			</view>

			<view class="index-btn-upload" @click="goBackHome()">返回首页</view>
		</view>
	</view>
</template>

<script>
	import {
		getFileList
	} from '../../common/service.js'

	export default {
		data() {
			return {
				showVideoUrl: '',
				videoContext: null,
				canGetMoreVideo: false,
				canGetMoreImage: false,
				videoList: [], // 默认取前面的3个视频
				videoList2: [], // 超出3个的视频
				imgList: [], // 默认取前面的3个图片
				imgList2: [], // 超出3个的图片
				detailObj: {} // 详情
			};
		},
		onShow: function() {
			const that = this;
			// app每次显示的时候，都要查询列表数据
			uni.getStorage({
				key: 'XDItem',
				success: function(res) {
					that.detailObj = res.data;
					console.log('获取到巡店记录详情：');
					console.log(that.detailObj);
					uni.removeStorage({
						key: 'XDItem',
						success: function(res) {
							console.log('remove XDItem success');
							that.getDetailVideos(that.detailObj.id);
							that.getDetailImgs(that.detailObj.id);
						}
					});
				}
			});
		},
		methods: {
			showVideoFn(url) {
				const that = this;
				this.showVideoUrl = url;
				setTimeout(function() {
					// 获取 video 上下文 videoContext 对象
					that.videoContext = uni.createVideoContext('myVideo');
					console.log('获取到视频对象:');
					console.log(that.videoContext);
					// 进入全屏状态
					that.videoContext.requestFullScreen();
					// 播放
					that.videoContext.play();
				}, 40)
			},
			closeVideoFn() {
				this.videoContext.exitFullScreen();
				this.showVideoUrl = '';
			},
			imgPreview(idx) {
				const that = this;
				console.log('预览图片:');
				console.log(idx);
				const arr = that.imgList.concat(that.imgList2);
				console.log(arr);
				if (arr.length > 0) {
					const list = [];
					arr.forEach(function(item) {
						list.push(item.fileFullUrl);
					})
					// 预览图片
					uni.previewImage({
						current: idx, // uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。
						urls: list
					});
				}
			},
			goBackHome() {
				uni.navigateBack({});
			},
			getDetailVideos(id) {
				const that = this;
				that.videoList = [];
				that.videoList2 = [];
				const params = {
					// id: '', // 文件记录id，编辑更新时要传，新增时不传
					sourcessId: id, // 业务id (预约记录id)
					sourcessType: '巡店视频', // 业务类型、记录分类
					isActive: '1' // 是否有效
				};
				getFileList(params, function(res) {
					console.log('video-getFileList-success:');
					console.log(res);
					if (res && res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const data = rs.rows;
							if (data && data.length > 3) {
								for (let i = 0; i < data.length; i++) {
									if (i < 3) {
										that.videoList.push(data[i]);
									} else {
										that.videoList2.push(data[i]);
									}
								}
							} else {
								that.videoList = data || [];
							}
						}
					}
				}, function(e) {
					console.log('video-getFileList-err:');
					console.log(e);
				});
			},
			getDetailImgs(id) {
				const that = this;
				that.imgList = [];
				that.imgList2 = [];
				const params = {
					// id: '', // 文件记录id，编辑更新时要传，新增时不传
					sourcessId: id, // 业务id (预约记录id)
					sourcessType: '巡店图片', // 业务类型、记录分类
					isActive: '1' // 是否有效
				};
				getFileList(params, function(res) {
					console.log('img-getFileList-success:');
					console.log(res);
					if (res && res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const data = rs.rows;
							if (data && data.length > 3) {
								for (let i = 0; i < data.length; i++) {
									if (i < 3) {
										that.imgList.push(data[i]);
									} else {
										that.imgList2.push(data[i]);
									}
								}
							} else {
								that.imgList = data || [];
							}
						}
					}
				}, function(e) {
					console.log('img-getFileList-err:');
					console.log(e);
				});
			},
			getMorVideo() {
				const that = this;
				for (let i = 0; i < that.videoList2.length; i++) {
					that.videoList.push(that.videoList2[i]);
				}
				that.videoList2 = [];
			},
			getMorImg() {
				const that = this;
				for (let i = 0; i < that.imgList2.length; i++) {
					that.imgList.push(that.imgList2[i]);
				}
				that.imgList2 = [];
			}
		}
	};
</script>

<style>
	page,
	.detail-container {
		width: 100%;
		background-color: #F3F5F7;
	}

	.detail-main {
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 172rpx;
		padding-top: 30rpx;
		padding-bottom: 142rpx;
	}

	.author-box {
		width: 670rpx;
		height: 102rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
	}

	.author-box .info {
		flex: 1;
	}

	.author-box .info .top {
		width: 100%;
		text-align: left;
		text-indent: 6rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 10rpx;
	}

	.author-box .info .bottom {
		width: 100%;
		text-align: left;
		text-indent: 6rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 10rpx;
	}

	.detail-title {
		width: 670rpx;
		/* height: 68rpx; */
		line-height: 48rpx;
		text-align: left;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #262628;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 15rpx;
	}

	.detail-remark {
		width: 670rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #555555;
		line-height: 48rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 15rpx;
	}

	.detail-videos-box-title {
		width: 670rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(79, 90, 97, 0.7);
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 30rpx;
	}

	.detail-videos-box {
		width: 100%;
		padding: 5rpx 30rpx 5rpx 10.5rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.detail-video-item {
		width: 217rpx;
		height: 217rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		overflow: hidden;
		margin-left: 19.5rpx;
		margin-bottom: 20.5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.detail-video-item-bg {
		width: 100%;
		height: auto;
		border-radius: 16rpx;
		background: none !important;
		position: relative;
	}

	.detail-video-item-bg image,
	.detail-video-item video {
		width: 100%;
		border-radius: 16rpx;
	}

	.detail-video-item video {
		height: 100%;
	}

	.my-video-bg {
		width: 217rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
	}

	.btn-get-more {
		width: 217rpx;
		height: calc(100% - 6rpx);
		max-height: 217rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: rgba(0, 0, 0, .5);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.index-btn-upload {
		width: 626rpx;
		height: 112rpx;
		line-height: 112rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		letter-spacing: 1rpx;
		background-image: url(../../static/btn.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		position: fixed;
		left: 62rpx;
		bottom: 0;
		z-index: 30;
	}
	.show-video-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 50;
	}
	.show-video-box-bd{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	/* .show-video-box-bd video {
		width: 100%;
		height: 100%;
	} */
	
	.close-show-video-btn{
		padding: 8rpx 30rpx;
		font-size: 24rpx;
		background-color: #FFFFFF;
		color: rgba(0,0,0,.8);
		border-radius: 35rpx;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		z-index: 99999999999999;
	}
</style>
